<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :rules="rules" :model="model" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入模板名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="模板类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <j-dict-select-tag placeholder="请选择模板类型" v-model="model.type" dictCode="template_type"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="批次名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportPeriod">
<!--              <j-dict-select-tag placeholder="请选择模批次名称" v-model="model.reportPeriod"
                                 dictCode="template_report_type"/>-->
              <a-input v-model="model.reportPeriod" placeholder="请输入批次名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="审计类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportType">
              <j-dict-select-tag placeholder="请选择审计类型" v-model="model.reportType" dictCode="report_type"/>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="12">
            <a-form-model-item label="报表分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportCategoryId">
              <a-select
                v-model="model.reportCategoryId"
                style="width: 100%"
                placeholder="报表分类"
                option-label-prop="label"
              >
                <template v-for="(item, index) in reportList">
                  <a-select-option :value="item.id || ''" :label="item.name" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="12">
            <a-form-model-item label="报表类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taskCategoryId">
              <a-select
                v-model="model.taskCategoryId"
                style="width: 100%"
                placeholder="报表类型"
                option-label-prop="label"
              >
                <template v-for="(item, index) in taskList">
                  <a-select-option :value="item.id || ''" :label="item.name" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="title">版本信息</div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange">
            <template slot="versionStatus" slot-scope="text, record">
              <a-tag v-if="text=='1'" color="#87d068">
                当前启用
              </a-tag>
              <a-tag v-else color="#adadad">
                未启用
              </a-tag>
            </template>
            <template slot="remarks" slot-scope="text, record, index">
              <j-ellipsis :value="text" :length="20"/>
            </template>
            <span slot="action" slot-scope="text, record">
          <a-button @click="OnSelectVersion(record)">查看</a-button>
        </span>
          </a-table>
        </a-row>
      </a-form-model>
    </j-form-container>
    <PerviewTableModal ref="PerviewTableModal"></PerviewTableModal>
  </a-spin>
</template>

<script>

  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {httpAction, getAction} from '@/api/manage'
  import columns from './columns'
  import PerviewTableModal from './PerviewTable/PerviewTableModal'

  export default {
    name: 'CreateForm',
    components: {
      PerviewTableModal
    },
    mixins: [JeecgListMixin],
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data() {
      return {
        columns: columns(),
        model: {},
        queryParam: {},
        reportList: [],
        taskList: [],
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 17},
        },
        rules: {
          name: [
            {required: true, message: '必填项', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '必填项', trigger: 'change'}
          ],
          reportPeriod: [
            {required: true, message: '必填项', trigger: 'change'}
          ],
         /* reportType: [
            {required: true, message: '必填项', trigger: 'change'}
          ],*/
          /*reportCategoryId: [
            {required: true, message: '必填项', trigger: 'change'}
          ],*/
          taskCategoryId: [
            {required: true, message: '必填项', trigger: 'change'}
          ],
        },
        confirmLoading: false,
        disableMixinCreated: true,
        url: {
          list: '/sjtb/dataCollectionTemplateVersion/list',
          add: '/sjtb/dataCollectionTemplateInfo/add',
          edit: '/sjtb/dataCollectionTemplateInfo/edit',
          reportList: '/sjtb/dataCollectionReportCategory/list',
          taskList: '/sjtb/dataCollectionTaskCategory/list',
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    methods: {
      OnSelectVersion(record) {
        this.$refs.PerviewTableModal.edit(record)
        this.$refs.PerviewTableModal.title = `${record.templateName}（v ${record.version}）`
        this.$refs.PerviewTableModal.disableSubmit = false
      },
      getReportList() {
        getAction(this.url.reportList).then((res) => {
          if (res.success && res.result.length > 0) {
            this.reportList = res.result
          } else {
            console.log(res)
          }
        })
      },

      getTaskList() {
        getAction(this.url.taskList).then((res) => {
          if (res.success && res.result.length > 0) {
            this.taskList = res.result
          } else {
            console.log(res)
          }
        })
      },

      add() {
        this.edit(this.modelDefault)
      },
      edit(record) {
        this.model = Object.assign({}, record)
        this.queryParam = {templateId: this.model.id}
        this.loadData(1)
        this.getReportList()
        this.getTaskList()
        this.visible = true
      },
      submitForm() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      },
    }
  }
</script>
<style scoped>
  .title {
    width: 20%;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
    color: #3955a5;
  }
</style>